<template>
	<view>
		<view class="recommend">
			<view class="recommend-con">
				
				<view class="recommend-item" @click="toVideoItem(item)" v-for="item in list" :key="item.id">
					<view class="recommend-img">
						<image :src="item.cover_img" mode="widthFix"></image>
						<view class="isplay">
							<image src="../../../static/icon/isplay.png" mode=""></image>
						</view>
					</view>
					<view class="recommend-title">
						<view>{{item.title}}</view>
					</view>
				</view>
				
			</view>

			<slot></slot>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			toVideoItem(item) {
				uni.navigateTo({
					url: "/pages/index/i-video/i-video/i-video"
				})
				
				// console.log(item);
				
				getApp().globalData.i_video = item;
			}
		},
		props: {
			list: {
				type: Array, 
				default() {
					return [];
				}
			}
		},
		
	}
</script>

<style scoped lang="scss">
	.recommend {

		.more {
			width: 100%;
			color: #fff;
			font-size: 30rpx;
			height: 80rpx;
			background-color: #72aef7;
			text-align: center;
			line-height: 80rpx;
			border-radius: 5px;
		}

		.recommend-con {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.recommend-item {
				width: 48%;
				margin-bottom: 30rpx;
				background-color: #fff;
				border-radius: 8px;
				padding-bottom: 16rpx;

				.recommend-img {
					width: 100%;
					height: 190rpx;
					overflow: hidden;
					border-radius: 8px 8px 0 0;
					position: relative;

					image {
						width: 100%;
						vertical-align: middle;
					}
					
					.isplay {
						position: absolute;
						left: 10rpx;
						bottom: 10px;
						width: 40rpx;
						height: 40rpx;
						image {
							width: 100%;
							height: 100%;
							opacity: .8;
						}
					}
				}

				.recommend-title {
					margin-top: 15rpx;
					padding: 0 16rpx;
					font-size: 26rpx;

					view {
						height: 78rpx;
						line-height: 40rpx;
						/* 多行文本溢出隐藏 */
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						/*设置对齐模式*/
						-webkit-line-clamp: 2;
						/*设置多行的行数*/
					}
				}
			}
		}

	}
</style>
